<template>
  <div>
    <vxe-table border :data="tableData" size="mini">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="Product_Code" title="Product" width="180" :edit-render="{}">
        <template #default="{ row }">
          <InputsSelectDialog
            :ref="getDialogRef(row)"
            :dialogTitle="'Product List'"
            v-model.trim="row.Product_Code"
            v-model:bindValue="row.Product"
            v-model:form-value="inputSelectOptions.proOwnerFormData"
            :formItems="inputSelectOptions.proOwnerFormItems"
            :tableColumns="inputSelectOptions.proOwnerTableColumns"
            :myCustomConfig="myCustomConfig"
            :requestUrl="getProductIndexOwnerAPI"
            @select-enter="(value, selectedRow) => proOwnerHandleEnter(value, selectedRow, row)"
            @select-row-click="selectedRow => proOwnerClickRow(row, selectedRow)"
          />
        </template>
      </vxe-column>
      <vxe-column field="name" title="Name">
        <template #default="{ row }">
          <el-input v-model="row.name" clearable></el-input>
        </template>
      </vxe-column>
      <vxe-column field="num" title="数字">
        <template #default="{ row }">
          <el-input v-model="row.num" type="number"></el-input>
        </template>
      </vxe-column>
      <vxe-column field="integer" title="整数">
        <template #default="{ row }">
          <el-input v-model="row.integer" type="integer"></el-input>
        </template>
      </vxe-column>
      <vxe-column field="float" title="小数">
        <template #default="{ row }">
          <el-input v-model="row.float" type="float"></el-input>
        </template>
      </vxe-column>
      <vxe-column field="date" title="日期" width="180" :edit-render="{}">
        <template #default="{ row }">
          <el-input v-model="row.date" type="date"></el-input>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import { inputSelectOptions } from './config'
import { getProductIndexOwnerAPI } from '@/api/common'
import InputsSelectDialog from '@/components/InputsSelectDialog/index.vue'
import { ref, reactive } from 'vue'

const dialogRefs = ref({})
const getDialogRef = row => {
  return el => {
    if (el) {
      dialogRefs.value[row.id] = el
    }
  }
}
const myCustomConfig = {
  codeKey: 'Product',
  type: 'PRODUCT',
  idName: 'customerId',
  idValue: 232323,
  gstCodeType: 'purchase',
  customerKey: 1,
  searchKey: 'abc'
}
const proOwnerHandleEnter = (value, selectedRow, row) => {
  console.log('value:', value, 'selectedRow:', selectedRow, 'row:', row)
}

const proOwnerClickRow = (row, selectedRow) => {
  row.Product_Code = selectedRow.Product
  row.Product = selectedRow.Cid
  nextTick().then(() => {
    const dialog = dialogRefs.value[row.id]
    if (dialog) {
      dialog.handleCloseDialog()
    }
  })
}

const tableData = reactive([
  {
    id: 10001,
    name: 'Test1',
    Product_Code: 'ron01',
    Product: '43434343',
    role: 'Develop',
    sex: 'Man',
    num: '',
    integer: '',
    float: '',
    date: '',
    time: '',
    year: '',
    quarter: '',
    month: '',
    week: '',
    datetime: '',
    address: 'test abc'
  },
  {
    id: 10002,
    name: 'Test2',
    Product_Code: '',
    Product: '',
    role: 'Test',
    sex: 'Women',
    num: '22',
    integer: '23',
    float: '22.35',
    date: '',
    time: '',
    year: '',
    quarter: '',
    month: '',
    week: '',
    datetime: '',
    address: 'Guangzhou'
  },
  {
    id: 10003,
    Product_Code: '',
    Product: '',
    name: 'Test3',
    role: 'PM',
    sex: 'Man',
    num: '32',
    integer: '',
    float: '',
    date: '2024-06-06',
    time: '10:30:45',
    year: '2024',
    quarter: '2024-01-01',
    month: '2024-06',
    week: '2024-06-03',
    datetime: '2024-06-06 10:30:45',
    address: 'Shanghai'
  }
])
</script>
